<template>
	<div class="form-wrap">
		<div class="ul">
			<!-- <div
				@click="handleClick(index)"
				class="li"
				:class="{ active: activeIndex === index }"
				v-for="(item, index) in 6"
				:key="index"
			>
				小额贷款{{ index + 1 }}
			</div> -->
		</div>
		<form-create v-model:api="formApi" :rule="formRules" :option="formOptions"></form-create>
		<el-button class="btn" type="primary" @click="hanldeSubmit">提交</el-button>
		<hr />
		<comp-card-form />
	</div>
</template>
<script setup name="FormCreate" lang="ts">
import { Api } from '@form-create/element-ui';
import { onMounted, ref, nextTick } from 'vue';
import formValidate from '@/utils/form-validate';
import CompCardForm from '@/components/CompCardForm/index.vue';
const formApi = ref<Api | null>(null);
const formRules = ref([
	{
		type: 'input',
		field: 'name',
		title: '姓名',
		col: { span: 12 },
		validate: formValidate({ required: true, message: '请输入姓名' })
	},
	{
		type: 'InputNumber',
		field: 'age',
		title: '年龄',
		col: { span: 12 },
		validate: formValidate({ required: true, min: 18, max: 40 })
	},
	{
		type: 'input',
		field: 'email',
		title: '邮箱',
		col: { span: 12 },
		validate: formValidate({ required: true, type: 'emails' })
	},
	{
		type: 'input',
		field: 'phone',
		title: '联系电话',
		col: { span: 12 },
		validate: formValidate({ required: true, type: 'telOrMobile' })
	},
	{
		type: 'select',
		field: 'documentType',
		title: '证件类型',
		col: { span: 12 },
		options: [
			{ label: '居民身份证', value: 'idCard' },
			{ label: '组织机构代码', value: 'orgCode' },
			{ label: '社会信用代码', value: 'creditCode' }
		],
		update(val, rule, formApi) {
			formApi.setValue('cardNo', '');
			if (val === 'idCard') {
				formApi.updateRule('cardNo', {
					validate: formValidate({ required: true, type: 'idCard' })
				});
			} else if (val === 'orgCode') {
				formApi.updateRule('cardNo', {
					validate: formValidate({ required: true, type: 'orgCode' })
				});
			} else if (val === 'creditCode') {
				formApi.updateRule('cardNo', {
					validate: formValidate({ required: true, type: 'creditCode' })
				});
			}
		},
		validate: formValidate({ required: true })
	},
	{
		type: 'input',
		field: 'cardNo',
		title: '证件号码',
		col: { span: 12 },
		validate: formValidate({ required: true })
	},
	{
		type: 'checkbox',
		field: 'hobbys',
		title: '爱好',
		options: [
			{
				label: '吃饭',
				value: '1'
			},
			{
				label: '睡觉',
				value: '2'
			},
			{
				label: '打豆豆',
				value: '3'
			}
		],
		col: { span: 12 },
		validate: formValidate({
			required: true,
			validator: {
				fn: validateCheckboxNum
			}
		})
	},
	{
		type: 'input',
		field: 'address',
		title: '居住地址',
		validate: formValidate({ required: true }),
		col: { span: 24 },
		props: {
			type: 'textarea',
			rows: 5
		}
	},
	{
		type: 'subForm',
		field: 'familyInfo',
		title: '家庭成员信息',
		validate: formValidate({
			required: true,
			validator: {
				fn: validateFamilyInfo
			}
		}),
		props: {
			rule: [
				{ type: 'input', field: 'name', title: '姓名', col: { span: 24 } },
				{
					type: 'select',
					field: 'sex',
					title: '性别',
					col: { span: 24 },
					control: [
						{
							value: '1',
							rule: [
								{
									type: 'input',
									field: 'age',
									title: '年龄'
								}
							]
						}
					],
					options: [
						{ label: '男', value: '1' },
						{ label: '女', value: '2' }
					]
				}
			]
		}
	},
	{
		type: 'cascader',
		field: 'aboutAddress',
		title: '归属地',
		props: {
			checkStrictly: true,
			multiple: true, // 允许多选
			emitPath: false, // 只返回选中的节点值
			options: [
				{
					value: 'beijing',
					label: '北京',
					children: [
						{
							value: 'gugong',
							label: '故宫'
						},
						{
							value: 'tiantan',
							label: '天坛'
						},
						{
							value: 'wangfujing',
							label: '王府井'
						}
					]
				},
				{
					value: 'jiangsu',
					label: '江苏',
					children: [
						{
							value: 'nanjing',
							label: '南京',
							children: [
								{
									value: 'fuzimiao',
									label: '夫子庙'
								}
							]
						},
						{
							value: 'suzhou',
							label: '苏州',
							children: [
								{
									value: 'zhuozhengyuan',
									label: '拙政园'
								},
								{
									value: 'shizilin',
									label: '狮子林'
								}
							]
						}
					]
				}
			]
		},
		col: { span: 24 },
		style: {
			width: '100%'
		}
	},
	{
		type: 'input',
		field: 'code',
		title: '代码',
		col: { span: 24 },
		style: {
			width: '300px'
		},
		props: {
			type: 'textarea',
			rows: 5
		}
	},
	{
		type: 'row',
		style: {
			width: '100%'
		},
		children: [
			{
				type: 'select',
				field: '人民币RMB', // 注意：两个字段不能同名
				title: '注册资本（万元）',
				validate: true,
				value: '人民币RMB',
				options: [{ label: '人民币', value: '人民币RMB' }],
				props: {
					disabled: true
				},
				col: { span: 6 } // 自动继承 row 的 24 栅格
			},
			{
				type: 'input',
				field: 'registeredCapital',
				validate: true,
				col: { span: 6 }
			},
			{
				type: 'input',
				field: 'code',
				title: '代码',
				col: { span: 12 }
			}
		]
	},
	{
		type: 'input',
		field: 'email',
		title: '邮箱',
		col: { span: 12 },
		validate: formValidate({ required: true, type: 'emails' })
	},
	{
		type: 'input',
		field: 'phone',
		title: '联系电话',
		col: { span: 12 },
		validate: formValidate({ required: true, type: 'telOrMobile' })
	}
]);
const activeIndex = ref(0);
const formOptions = {
	form: {
		labelWidth: '180px',
		inline: false
	},
	submitBtn: false
};
const statusVal = 2;
const stepList = ref([
	{
		title: '第一步',
		value: 1,
		showFlag: true
	},
	{
		title: '第二步',
		value: 2,
		showFlag: false
	},
	{
		title: '第三步',
		value: 3,
		showFlag: true
	}
]);
const activeIndexVal = computed(() => {
	if (statusVal === 3) {
		return stepList.value.length;
	}
	return stepList.value.findIndex(item => item.value === statusVal);
});
interface ObjType {
	[key: string]: number | string;
}

// const obj1: ObjType = {
//   a: 11,
//   b: 22
// };
// const obj2: ObjType = {
//   c: "",
//   d: ""
// };

// // 按属性定义顺序复制值
// Object.keys(obj2).forEach((key, index) => {
//   const obj1Keys = Object.keys(obj1);
//   if (obj1Keys[index]) {
//     obj2[key] = obj1[obj1Keys[index]] as typeof obj2[typeof key];
//   }
// });
// console.log(obj2, obj1)

const arr1 = [
	{
		key: 'a',
		value: '11'
	},
	{
		key: 'b',
		value: '22'
	}
];
const arr2 = [
	{
		key: 'c',
		value: ''
	},
	{
		key: 'd',
		value: ''
	}
];

onMounted(() => {
	nextTick(() => {
		setTimeout(() => {
			formApi.value?.setValue({
				documentType: 'orgCode'
			});
		}, 2000);
	});
});
async function hanldeSubmit() {
	const res = await formApi.value?.validate();
	console.log(res);
}
function handleClick(index: number) {
	setTimeout(() => {
		activeIndex.value = index;
	}, 1000);
}
function validateCheckboxNum(rule: any, value: string | any[], callback: (arg0: Error) => void) {
	console.log(rule, value, callback);
	if (value.length < 2) {
		callback(new Error('请选择至少两项爱好'));
	}
}
function validateFamilyInfo(rule: any, value: any, callback: (error?: Error) => void) {
	if (value.sex !== '1') {
		callback(new Error('性别必须是男'));
	} else {
		callback();
	}
}
</script>
<style scoped>
.form-wrap {
	margin-top: 20px;
}
.btn {
	display: flex;
	margin: auto;
}
.ul {
	width: 600px;
	display: flex;
	align-items: center;
	height: 50px;
	/* border: 1px solid #ccc; */
}
.ul .li {
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	border-left: 1px solid #ccc;
	height: 50px;
	line-height: 50px;
	padding: 0 5px;
}
.ul .li:last-child {
	border-right: 1px solid #ccc;
}
.ul .li.active {
	background-color: orangered;
	color: #fff;
}
</style>
